<template>
  <div class="sensitive-word-container">
    <h2>敏感词管理</h2>
    
    <!-- 操作区域 -->
    <div class="operation-area">
      <el-input
        v-model="newWord"
        placeholder="请输入敏感词"
        style="width: 300px; margin-right: 10px"
      ></el-input>
      <el-button type="primary" @click="handleAdd">添加</el-button>
      <el-button type="danger" @click="handleBatchDelete" :disabled="selectedWords.length === 0">
        批量删除
      </el-button>
    </div>
    
    <!-- 敏感词列表表格 -->
    <el-table 
      :data="wordList" 
      border 
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="word" label="敏感词"></el-table-column>
      <el-table-column prop="createdAt" label="创建时间" width="180"></el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button 
            size="mini" 
            @click="handleEdit(scope.row)"
          >
            编辑
          </el-button>
          <el-button 
            size="mini" 
            type="danger" 
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 编辑对话框 -->
    <el-dialog 
      title="编辑敏感词" 
      :visible.sync="editDialogVisible" 
      width="30%"
    >
      <el-input v-model="editingWord.word"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmEdit">确定</el-button>
      </span>
    </el-dialog>
    
    <!-- 内容过滤测试区域 -->
    <div class="test-area" style="margin-top: 30px;">
      <h3>内容过滤测试</h3>
      <el-input
        type="textarea"
        :rows="4"
        v-model="testContent"
        placeholder="请输入测试内容"
        style="width: 100%; margin-bottom: 10px"
      ></el-input>
      <el-button type="primary" @click="testFilter">测试过滤</el-button>
      <div v-if="filteredContent" style="margin-top: 20px;">
        <h4>过滤结果：</h4>
        <div style="padding: 10px; border: 1px solid #eee; border-radius: 4px;">
          {{ filteredContent }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SensitiveWordManagement',
  data() {
    return {
      wordList: [
        { id: 1, word: '垃圾', createdAt: '2023-05-10 14:30' },
        { id: 2, word: '废物', createdAt: '2023-05-11 09:20' },
        { id: 3, word: '笨蛋', createdAt: '2023-05-12 16:40' }
      ],
      newWord: '',
      selectedWords: [],
      editDialogVisible: false,
      editingWord: {
        id: null,
        word: ''
      },
      testContent: '',
      filteredContent: ''
    }
  },
  methods: {
    handleAdd() {
      if (!this.newWord.trim()) {
        this.$message.warning('请输入敏感词')
        return
      }
      
      const newId = this.wordList.length > 0 
        ? Math.max(...this.wordList.map(w => w.id)) + 1 
        : 1
      
      this.wordList.push({
        id: newId,
        word: this.newWord,
        createdAt: new Date().toLocaleString()
      })
      
      this.newWord = ''
      this.$message.success('添加成功')
    },
    
    handleDelete(word) {
      this.$confirm('确定要删除该敏感词吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const index = this.wordList.findIndex(w => w.id === word.id)
        this.wordList.splice(index, 1)
        this.$message.success('删除成功')
      })
    },
    
    handleBatchDelete() {
      this.$confirm('确定要删除选中的敏感词吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = this.selectedWords.map(w => w.id)
        this.wordList = this.wordList.filter(w => !ids.includes(w.id))
        this.selectedWords = []
        this.$message.success('批量删除成功')
      })
    },
    
    handleEdit(word) {
      this.editingWord = { ...word }
      this.editDialogVisible = true
    },
    
    confirmEdit() {
      if (!this.editingWord.word.trim()) {
        this.$message.warning('请输入敏感词')
        return
      }
      
      const index = this.wordList.findIndex(w => w.id === this.editingWord.id)
      this.wordList.splice(index, 1, { ...this.editingWord })
      this.editDialogVisible = false
      this.$message.success('修改成功')
    },
    
    handleSelectionChange(selection) {
      this.selectedWords = selection
    },
    
    testFilter() {
      if (!this.testContent.trim()) {
        this.$message.warning('请输入测试内容')
        return
      }
      
      let result = this.testContent
      this.wordList.forEach(word => {
        const regex = new RegExp(word.word, 'g')
        result = result.replace(regex, '***')
      })
      
      this.filteredContent = result
    }
  }
}
</script>

<style scoped>
.sensitive-word-container {
  padding: 20px;
}

.operation-area {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.test-area {
  margin-top: 30px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 4px;
}
</style>